import React, { PureComponent } from 'react'
import { withRouter } from "react-router-dom";
import { Button, Input } from "antd";
import { connect } from "react-redux";
import { getQuery } from "@utils/setUrlQuery";
import { getInviteEmpInfo, getWeixinConfig } from "@sagas/employee";
import { loaderWeiXinSDK, wxConfig, wxShareLink } from '@pages/mobile/actions/weixin'
import { ShareTip } from './ShareTip'
@connect(null, {
    getInviteEmpInfo,
    getWeixinConfig
})
@withRouter
class EmployeeInvite extends PureComponent {
    constructor(props) {
        super(props);
        const { token } = getQuery(props)
        this.state = {
            token,
            name: '',
            mobile: '',
            role_name: ''
        }
        this.AppId = '';
        this.shareTipRef = React.createRef()
        this.getDataInfo = this.getDataInfo.bind(this)
        this.showTip = this.showTip.bind(this)
    }

    componentDidMount() {
        document.title = '邀请员工加入'
        document.querySelector('body').setAttribute('style', 'min-width: 100vw')
        const that = this
        loaderWeiXinSDK(() => {
            this.props.getWeixinConfig({
                url: decodeURIComponent(window.location.href)
            }, res => {
                wxConfig(res, ['updateAppMessageShareData', 'onMenuShareAppMessage'], () => {
                    that.getDataInfo();
                });
                that.AppId = res.app_id;
            })
        })
    }

    componentWillUnmount() {
        document.querySelector('body').removeAttribute('style')
    }

    getDataInfo() {
        const { token } = this.state
        const that = this
        const { getInviteEmpInfo } = this.props
        getInviteEmpInfo({
            shareToken: token
        }, res => {
            that.setState({
                name: res.name,
                mobile: res.mobile,
                role_name: res.role_name,
            })
            const { origin } = window.location;
            const redirect_uri = encodeURIComponent(`${origin}/employee/join?token=${token}`);
            let link = `${origin}/employee/redirect?appid=${this.AppId}&redirectUri=${redirect_uri}`;
            // 拼装分享参数
            const param = {
                title: `${res.invitor}邀请你加入${res.depart_name}`,
                desc: `完善个人信息,即可加入`,
                imgUrl: 'https://bgp.bucket.bilinbili.com/invite-icon.png',
                link,
            };
            wxShareLink(param, () => {
                message.success('分享成功');
            });
        })
    }

    showTip() {
        this.shareTipRef?.current?.show()
    }

    render() {
        const { name, mobile, role_name } = this.state
        return (
            <div className="bilin-web-mobile">
                <div className="ft-clr-d ft-14 mgb-12">已创建的员工信息如下</div>
                <div className="base-info-item">
                    <div className="item-label ft-clr-d">姓名：</div>
                    <div className="item-value ft-clr-md">{name}</div>
                </div>
                <div className="base-info-item">
                    <div className="item-label ft-clr-d">手机号</div>
                    <div className="item-value ft-clr-md">{mobile}</div>
                </div>
                <div className="base-info-item">
                    <div className="item-label ft-clr-d">权限</div>
                    <div className="item-value ft-clr-md">{role_name}</div>
                </div>
                <Button type="primary"
                className='button-green'
                    onClick={this.showTip}
                >邀请员工</Button>
                <ShareTip tipText="发送给指定员工" ref={this.shareTipRef} />
            </div>
        )
    }
}

export default EmployeeInvite